/cody/codingstella/projects/Glassmorphism%20Analog%20Clock/Glassmorphism-Analog-Clock-using-CSS-and-JavaScript-Main/css/style.css
* { margin: 0; padding: 0; box-sizing: border-box;}
body { height: 100vh; display: flex; align-items: center; justify-content: center; background: #111;}
.container { position: relative;}
.container .circle { position: absolute; border-radius: 50%; pointer-events: none; animation: 2s ease-in infinite alternate;}
.container .circle:nth-child(1) { width: 180px; height: 180px; top: -60px; left: -60px; background: linear-gradient( #e524c3, #8626b2 ); animation-name: move-up;}
@keyframes move-up { to { transform: translateY(-10px); }}
.container .circle:nth-child(2) { width: 120px; height: 120px; bottom: -20px; right: -20px; background: linear-gradient( #d64612, #e48307 ); animation-name: move-down;}
@keyframes move-down { to { transform: translateY(10px); }}
.clock { width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, .1); border-radius: 50%; backdrop-filter: blur(15px); background: rgba(255, 255, 255, .05); box-shadow: 0 0 30px rgba(0, 0, 0, .2);}
.clock .clock-bg img { width: 100%; height: 100%;}
.clock::before { content: ''; position: absolute; width: 15px; height: 15px; background: #fff; border-radius: 50%; z-index: 15;}
.clock .hour,.clock .minute,.clock .second { position: absolute;}
.clock .hour,.clock .hour .hr { width: 160px; height: 160px;}
.clock .minute,.clock .minute .min { width: 190px; height: 190px;}
.clock .second,.clock .second .sec { width: 230px; height: 230px;}
.clock .hour .hr,.clock .minute .min,.clock .second .sec { display: flex; justify-content: center; position: absolute; border-radius: 50%;}
.clock .hour .hr::before { content: ''; position: absolute; width: 8px; height: 80px; background: #ff3d68; z-index: 10; border-radius: 10px;}
.clock .minute .min::before { content: ''; position: absolute; width: 4px; height: 90px; background: #39a2db; z-index: 11; border-radius: 8px;}
.clock .second .sec::before { content: ''; position: absolute; width: 3px; height: 140px; background: #fff; z-index: 12; border-radius: 2px;}